<template>
	<view style="padding: 0 30upx;">
			
		<view v-for="item in info">
			<!-- 默认列表 -->
			<view class="notice-item" v-if="item.templtype=='noticeList'">
				<view class="content">
					<text class="title">{{item.title}}</text>
					<jyf-parser class="introduce" :html="item.content" ref="article"></jyf-parser>
					<view class="time">{{item.createtime}}</view>
				</view>
			</view>
			
			<!-- 大图文本 -->
			<view v-if="item.templtype=='imageText'">
				<text class="module-time">{{item.createtime}}</text>
				<view class="module"  @click="navto(item.url)">
					<text class="module-title">{{item.title}}</text>
					<image :src="item.thumb" mode="widthFix"></image>
					<view class="module1-cont" style="flex-wrap: wrap;">
						<text>{{item.keywords}}</text>
					</view>
				</view>
			</view>
			
			<!-- 不打开消息详情 -->
			<view v-if="item.templtype=='goodsList'">
				<text class="module-time">{{item.createtime}}</text>
				<view class="module" @click="navto(item.url)">
					<text class="module-title">{{item.title}}</text>
					<image :src="item.thumb" mode="widthFix"></image>
					<view class="module1-cont" style="flex-wrap: wrap;">
						<text>{{item.keywords}}</text>
					</view>
				</view>
			</view>
			
			<!-- 文本列表 -->
			<view v-if="item.templtype=='textList'" >
				<text class="module-time">{{item.createtime}}</text>
				<view class="module"  @click="navto(item.url)">
					<view class="module1-cont">
						<text>{{subCont(item.keywords,'title')}}</text>
						<image :src="item.thumb" ></image>
					</view>
				</view>
			</view>
			
			<!-- 大图 -->
			<view v-if="item.templtype=='imageList'">
				<text class="module-time">{{item.createtime}}</text>
				<view class="module" style="background-color: #f2f2f2;"  @click="navto(item.url)">
					<image :src="item.thumb" mode="widthFix"></image>
				</view>
			</view>
		
		</view>
		
		<view class="notic-msg" v-if="noticMsg">
			-- 没有更多了 --
		</view>
	</view>
</template>

<script>
import jyfParser from "@/components/jyf-parser/jyf-parser";
export default{
	components: {
		jyfParser
	},
	data(){
		return {
			page: 1,
			cateid: '',
			info: [],
			noticMsg: 0,
			title:'mjfikdsmfksmfksmfksmfks'
		}
	},
	onLoad(options) {
		var that = this;
		that.cateid = options.cateid;
		if(options.title){
			uni.setNavigationBarTitle({
				title:options.title
			})
		}
		uni.showLoading({title: '加载中'})
		that.$axios('index/msglist', 'POST', 'salemsg', {
			page: that.page,
			cateid: that.cateid
		}).then(res => {
			uni.hideLoading();
			if (res.data.code == 200) {
				that.info = res.data.data.list;
			} else {
				that.$api.msg(res.data.data)
			}
		})
	},
	methods:{
		subCont(e,type){
			switch (type){
				case 'title':
					return e.length>37?e.substring(0,30)+' . . . . . .':e;
					break;
				case 'cont':
					return  e.length>42?e.substring(0,42)+' . . . . . .':e;
					break;
			}
		},
		navto(e) {
			var a = e.split('//')[0];
			if (a == 'http:'||a == 'https:') {
				// #ifdef APP-PLUS || MP-WEIXIN
				uni.navigateTo({
					url: "../web/web-view?url=" + e
				})
				// #endif
				// #ifdef H5
				window.location.href = e
				// #endif
			} else {
				uni.navigateTo({
					url: e
				})
			}
		}
	},
	onReachBottom() {
		var that = this;
		that.page = that.page + 1
		uni.showLoading({title: '加载中'})
		that.$axios('index/msglist', "POST", 'salemsg', {
			page: that.page,
			cateid: that.cateid
		}).then(res => {
			uni.hideLoading();
			if (res.data.code == 200) {
				if (res.data.data.list.length <= 0) {
					that.noticMsg = 1;
				}
				that.info = that.info.concat(res.data.data.list)
			} else {
				that.$api.msg(res.data.data)
			}
		})
	},
}
</script>

<style>
page{background-color: #f2f2f2;color: #303133;}
.notice-item {
		margin-top: 20upx;
		flex-direction: column;
		align-items: center;
	}

	.content {
		padding: 0 24upx;
		background-color: #fff;
		border-radius: 20upx;
	}

	.title {
		display: flex;
		align-items: center;
		line-height: 70upx;
		padding-top: 20upx;
		font-size: 32upx;
		color: #303133;
	}

	.introduce {
		display: inline-block;
		padding-bottom: 16upx;
		font-size: 28upx;
		color: #606266;
		line-height: 38upx;
	}

	.time {
		font-size: 28upx;
		text-align: right;
		color: #909399;
		padding-bottom: 20upx;
	}

	.notic-msg {
		color: #4399fc;
		line-height: 80upx;
		height: 80upx;
		font-size: 30upx;
		text-align: center;
	}
.module-time{color: #606266;font-size: 24upx;display: block;text-align: center;line-height: 74upx;padding-top: 10upx;}
.module{background-color: #fff;border-radius: 20upx;margin-bottom: 20upx;}
.module-title{color: #000; font-size: 34upx;line-height: 90upx;padding: 0 20upx;font-weight: bold;}
.module>image{border-top-left-radius: 10upx;border-top-right-radius: 10upx;width: 100%;}
.module1-cont{display: flex;align-items: center;flex-wrap: wrap;padding: 20upx;border-bottom: 1upx #EBEEF5 solid;}
.module1-cont text{flex: 1; font-size: 28upx;display: block;overflow: hidden;padding-right: 20upx;line-height: 40upx;min-height: 80upx;}
.module1-cont-cont{width: 100%;font-size: 26upx;color: #606266;line-height: 40upx;}
.module1-cont image{height: 120upx;width: 120upx;}
</style>
